<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="800px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="页面类型" prop="page" v-show="title!='编辑'">
                    <div class="flex">
                        <div class="pageType" :class="{ 'menu_active': index==current}" v-for="(item,index) in typeMod"
                             :key="index" @click="selectType(index)">
                            <i class="check-icon iconfont iconcheck-icon" v-show="index==current"></i>
                            <div class="type-container">
                                <img class="wid hei" :src="item.img"/>
                            </div>
                            <div class="typeText">
                                <span class="wei fon_14">{{item.name}}</span>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.trim="form.sort" autocomplete="off" placeholder="请输入排序" type="number"></el-input>
                </el-form-item>
                <el-form-item label="页面名称" prop="name">
                    <el-input v-model.trim="form.name" autocomplete="off" placeholder="请输入页面名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {dragSave} from "@/api/renovation";

    export default {
        name: "labelSave",
        created() {
        },
        data() {
            return {
                current: 0,
                form: {
                    id: '',
                    sort: '1',
                    name: "",
                    type: "",
                    page: "",
                },
                title: "",
                dialogFormVisible: false,
                typeMod: [
                    {
                        id: '1',
                        icon: '1',
                        name: '首页',
                        img: require('../../../assets/img/style/sy.png'),
                    },
                    {
                        id: '2',
                        icon: '2',
                        name: '个人中心',
                        img: require('../../../assets/img/style/gz.png'),
                    },
                    {
                        id: '3',
                        icon: '3',
                        name: '自定义页面',
                        img: require('../../../assets/img/style/zy.png'),
                    },
                ],
            }
        },
        components: {},
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "编辑";
                    this.form = Object.assign({}, row);
                }
                this.dialogFormVisible = true;
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            selectType(index) {
                this.current = index
                this.form.page = index
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.page = this.current+1
                        let formdata = {}
                        formdata = Object.assign({},this.form);
                        if(this.title == "编辑"){
                            delete formdata.page
                            console.log(formdata)
                        }
                        const {msg} = await dragSave(formdata);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },

        }
    };
</script>
<style lang="scss" scoped>
    .pageType {
        border: 1px solid #E9EDEF;
        position: relative;
        margin-right: 20px;
        padding: 9px;
        width: 180px;
        height: 258px;
        border-radius: 2px;
        background-color: #ffffff;
        cursor: pointer;
        overflow: hidden;
        box-sizing: border-box;
    }

    .check-icon {
        position: absolute;
        bottom: -10px;
        right: 0px;
        z-index: 101;
        font-size: 14px;
        color: #2d8cf0;
    }

    .type-container {
        overflow: hidden;
        height: 238px;
        position: relative;
    }

    .typeText {
        position: absolute;
        bottom: 9px;
        z-index: 100;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .menu_active {
        border: 1px solid #2d8cf0;
    }
</style>
